import React, { useState } from 'react'
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons'
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { useRoutes, Link, useNavigate } from 'react-router-dom'
import router from "@/router";
import Slider from "@/layout/slider";
const { Header, Content, Footer, Sider } = Layout;
type MenuItem = Required<MenuProps>['items'][number];
function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const items: MenuItem[] = [
  getItem('Home', '/home', <PieChartOutlined />),
  getItem('Detail', 'detail', <DesktopOutlined />),
  // getItem('User', 'sub1', <UserOutlined />, [
  //   getItem('Tom', '3'),
  //   getItem('Bill', '4'),
  //   getItem('Alex', '5', '',[
  //     getItem('Tom', '10'),
  //     getItem('Bill', '11'),
  //     getItem('Alex', '12'),
  //   ]),
  // ]),
  // getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
  // getItem('Files', '9', <FileOutlined />),
];

const App: React.FC = () => {
  const outlet = useRoutes(router)
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate()
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const onClick = (e) => {
    navigate(e.key, { replace: true })
  }
  return (
    // <div className="App">
    //   <Link to="/">Home</Link>
    //   <Link to="/detail">Detail</Link>
    //   {outlet}
    // </div>
    <Layout style={{ minHeight: '100vh' }}>
      <Slider/>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <Breadcrumb style={{ margin: '16px', height: '32px', lineHeight: '32px' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
        </Header>
        <Content style={{ margin: '15px' }}>
          <div style={{ padding: 24, minHeight: '100%', background: colorBgContainer }}>
            {outlet}
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>Ant Design ©2023 Created by Ant UED</Footer>
      </Layout>
    </Layout>
  )
}

export default App
